<template>
    <div class="bodyBox">
        <div v-masonry>
            <div class="pictureBox" v-masonry-tile v-for="item in modelData" @click="toProfile(item.sex, item.id)">
                <div class="image">
                    <img :src="item.headImage" alt="">
                    <div class="zhezhao">
                        <h4>{{ item.name }}</h4>
                        <p>{{ item.height }} <span>{{ item.bwh }}</span></p>
                    </div>
                </div>
                <div class="name">
                    {{ item.name }}
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { searchAllMaleAPI } from '@/apis/user';
import { onMounted } from 'vue';


import { useRouter } from 'vue-router';

const router = useRouter()

const toProfile = (id) => {
    router.push('/men/profile/' + id)
}

const modelData = ref([])

const getAllMaleModel = async () => {
    const res = await searchAllMaleAPI();

    if (res.data.code === 200) {
        console.log(res.data.data)
        modelData.value = res.data.data
    }
    else {
        ElMessage.error(res.data.msg)
    }
}

onMounted(() => {
    getAllMaleModel()
})
</script>

<style lang="scss" scoped>
@media (min-width: 1300px) and (max-width: 1920px) {
    .bodyBox {
        .pictureBox {
            max-width: 30% !important;
        }
    }
}

@media (min-width: 768px) and (max-width: 1300px) {
    .bodyBox {
        
        .pictureBox {
            max-width: 45% !important;
        }
    }
}

@media (max-width: 768px) {
    .bodyBox {
        

        .pictureBox {
            max-width: 90% !important;
        }
    }
}


.bodyBox {
    margin-top: 35px;
    width: 100%;
    max-width: 1300px;
    min-height: calc(100vh - 160px);
    margin: 35px auto 60px;
   
    padding: 0 30px;
    

    .pictureBox {

        display: flex;
        flex-direction: column;
        overflow: hidden;
        margin-bottom: 30px;

        margin-right: 30px;

        img{
            display: block;
        }

        .image {
            overflow: hidden;
            position: relative;

            .zhezhao {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                background: rgba(0, 0, 0, 0.44);
                opacity: 0;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                transition: all .4s;

                h4 {
                    color: white;
                    margin-bottom: 15px;
                    font-size: 24px;
                    margin-bottom: 30px;
                }

                p {
                    color: white;
                    line-height: 30px;
                    margin-top: 10px;
                }
            }

            &:hover {

                cursor: pointer;

                img {
                    transform: scale(1.2);
                }

                .zhezhao {
                    opacity: 1;
                }
            }
        }



        img {
            width: 100%;
            transition: all .4s;
            overflow: hidden;
        }

        .name {
            background-color: #f1f1f1;
            height: 40px;
            line-height: 40px;
            padding: 0 15px;
            color: #333333;
        }
    }



}
</style>